<template>
    <div class="father">
        <h3>父组件</h3>
        <h4>银子：{{ money }}万</h4>
        <h4>车：一辆{{ car.brand }}车价值{{ car.prcie }}万</h4>
        <Child></Child>
    </div>
</template>

<script setup lang="ts" name="Father">
import { provide } from "vue";
import Child from "./Child.vue";
import { reactive, ref } from "vue";

let money = ref(100)
let car = reactive({
    brand: '奔驰',
    prcie: 100
})
function updateMoney(value: number) {
    money.value -= value

}
//向后台提供数据
provide("moneyContext", { money, updateMoney })
provide("car", car)


</script>

<style  scoped>
.father {
    background-color: reb(165, 164, 164);
    padding: 20px;
    border-radius: 10px;
}
</style>